<template>
	<view class="pay-detail">
		<view class="addr">
			<view class="_icon">
				<image src="../../static/img/user/icon-address.png"></image>
			</view>
			<view class="addr_text">
				<view class="addrName">珠几路180号</view>
				<view class="action">州长送&nbsp;15016641493</view>
			</view>
			<view class="updateIcon">
				<u-icon name="arrow-right" size="20"></u-icon>
			</view>
		</view>
		<view class="orderDetail">
			<view class="order_tushi" v-for="(item,index) in getOrderList" :key="index">
				<view class="order-img">
					<image :src="item.goodImg"></image>
				</view>
				<view class="order-text">
					<view class="orderName">
						{{item.goodName}}
					</view>
					<view class="orderType">
						{{item.type}}
					</view>
				</view>
				<view class="sum-num">
					<text>￥{{item.goodPrice}}\n</text>
					<text>x{{item.count}}</text>
				</view>
			</view>
			<view class="detail-text">
				<view class="d-li">
					<view class="head">
						配送方式
					</view>
					<view class="content">
						<view class="c-type">
							普通配送
						</view>
						<view class="c-update">
							<text>快递&nbsp;免邮</text>
							<u-icon name="arrow-right" size="15"></u-icon>
						</view>
					</view>
				</view>
				<view class="d-li">
					<view class="head">
						运送费
					</view>
					<view class="content">
						<view class="c-type">
							卖家赠送，若确认收货前退货，可以获保险赔付
						</view>
						<view class="c-update">
							<u-icon name="arrow-right" size="15"></u-icon>
						</view>
					</view>
				</view>
				<view class="d-li">
					<view class="head">
						店家优惠
					</view>
					<view class="content">
						<view class="c-type">
							省3元:限量3元
						</view>
						<view class="c-update">
							<u-icon name="arrow-right" size="15"></u-icon>
						</view>
					</view>
				</view>
				<view class="d-li">
					<view class="head">
						订单备注
					</view>
					<view class="content">
						<view class="c-type">
							选填，请先和商家协商一致
						</view>
					</view>
				</view>
				<view class="sum">
					<text>共{{getOrderList.length}}件</text>
					<text>小计:</text>
					<text>￥{{sumPrice}}</text>
				</view>
			</view>
		</view>
		<view class="btn">
				<view class="sumPrice">
				  <text>共1件，</text><text>合计:</text><text>￥<text>{{sumPrice}}</text></text>
				</view>
				<view class="bh">
					<u-button shape="circle" :plain="true" @click="addPay()">提交订单</u-button>
				</view>
		</view>
		<good-pay :obj = '{sum:sumPrice,show:show,id:orderId}'></good-pay>
	</view>
</template>

<script>
	import { apiDetail,addOrders} from '../../api/mock.js'
	import {mapGetters,mapActions} from 'vuex'
	export default {
		data() {
			return {
				shop:{},
				orderId:0,
				show:false,
			}
		},
		onLoad(e) {
			
			
		},
		watch:{
			
		},
		computed:{
			...mapGetters('orders',['getOrderList']),
			sumPrice(){
				let sum =0;
				this.getOrderList.forEach((item)=>{
					sum += item.count*item.goodPrice;
				})
				return sum;
			}
		},
		methods: {
			addPay(){
				uni.showModal({
					title:'提示',
					content:'是否确认下单',
					success:(res)=>{
						if(res.confirm){
							this.add();
							uni.showToast({
								title:'下单成功'
							})
							this.show = true;
						}else if(res.cancel){
							uni.showToast({
								title:'已取消',
								icon:'none'
							})
						}
					}
				})
			},
			add(){
				let id = new Date().getTime();
				this.orderId = id;
				this.shop={
					id:id,
					store: '夏日流星限定贩卖',
					deal: '待付款',
					timeOut:'',
					deliveryTime: new Date().getTime(),
					shopPay:'0',
					goodsList: this.getOrderList,
				}
				addOrders(this.shop).then((res)=>{
					this.shop = {}
					uni.showToast({
						icon:'success',
						title:`${res}`
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.pay-detail{
		padding: 10px;
		position: absolute;
		background-color: #e6e6e6;
		overflow: hidden;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		.addr{
			display: flex;
			background-color: white;
			padding: 10px;
			border-radius: 10px;
			._icon{
				width: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			._icon image{
				width: 25px;
				height: 25px;
			}
			.addr_text{
				width: 80%;
				overflow: hidden;
				.addrName{
					width: 100%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-size: 20px;
					font-weight: bold;
				}
			}
			.updateIcon{
				padding: 10px;
			}
		}
		.orderDetail{
			background-color: white;
			border-radius: 10px;
			padding: 10px;
			margin-top: 10px;
			.order_tushi{
				display: flex;
			}
			.order-img image{
				width: 90px;
				height: 90px;
				border-radius: 8px;
			}
			.order-text{
				overflow: hidden;
				padding-left: 5px;
				padding-right: 5px;
			
				.orderName{
					font-size: 15px;
					overflow: hidden;
					text-overflow: ellipsis;
					line-height: 20px;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.orderType{
					color: gray;
					font-size: 15px;
					margin-top: 5px;
				}
			}
			.sum-num{
				text-align: right;
				font-size: 13px;
				font-weight: bold;
				line-height: 30px;
				
			}
			.sum-num text:last-child{
				color: gray;
			}
		}
		.detail-text{
			font-size: 14px;
			margin-top: 20px;
			.d-li{
				display: flex;
				margin-top: 10px;
				.head{
					width: 30%;
					text-align: right;
					// font-weight: bold;
					margin: auto 0;
				}
				.content{
					width: 70%;
					display: flex;
					justify-content: space-between;
					.c-update{
						display: flex;
						align-items: center;
					}
					.c-type{
						padding: 10px;
						color: gray;
						font-size: 14px;
					}
				}
			}
		}
		.sum{
			font-size: 13px;
			height: 40px;
			line-height: 40px;
			text-align: right;
		}
		.sum text:first-child{
			color: gray;
			margin-right: 5px;
		}
		.sum text:last-child{
			color: #fe8902;
		}
	
		.btn{
			width: 100%;
			display: flex;
			background-color: white;
			height: 50px;
			line-height: 50px;
			position: fixed;
			bottom: 0;
			right: 0;
			.bh{
				padding: 5px;
			}
			.bh button{
				background-color: #fe8902;
				color: white;
			}
			.sumPrice{
				margin-left: 80px;
				margin-right: 10px;
			}
		}
		.btn text{
			color: gray;
		}
		.btn text:nth-child(2){
			color: black;
		}
		.btn text:nth-child(3){
			color: orange;
		}
		.btn text:nth-child(3) text{
			color: orange;
			font-size: 20px;
		}
	}

</style>
